<template>
  <div class="inventoryContrast">
    <div class="publicSearch">
      <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
        <el-button-group>
          <el-button @click="getinventoryContrastData" size="mini" icon="el-icon-search">查询</el-button>
          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh">重置</el-button>
        </el-button-group>
        <div>
          <span>物料编码</span>
          <el-input
            v-model="searchData.itemCode"
            style="width: 150px"
            size="mini"
            placeholder="请输入物料编码"
            clearable
          ></el-input>
        </div>
        <div>
          <span style="margin-right: 10px">库区</span>
          <el-select @change="onChange" v-model="searchData.areaId" size="mini">
            <el-option
              v-for="item in areas"
              :key="item.erpAreaId"
              :label="item.areaName"
              :value="item.erpAreaId"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span style="margin-right: 10px">状态</span>
          <el-select @change="onChangeQtyState" v-model="searchData.type" size="mini">
            <el-option
              v-for="item in qtyStates"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="headerBtns">
      <el-button
        size="small"
        type="primary"
        round
        icon="iconfont icon-shangjia"
        @click="exportInventory"
      >导出</el-button>
    </div>

    <div class="tableBox none">
      <el-table
        v-loading="loading.masterTable"
        highlight-current-row
        :data="inventoryContrasts"
        style="width: 100%"
        :row-style="Mystyle"
      >
        <el-table-column fixed="left" type="index" width="50"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="itemName" label="物料名称"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="itemNumber" label="物料编码" width="150"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="batchNo" label="批号"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="asnStockName" label="仓库"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="packDescribe" label="计量单位"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="quantity" label="WMS库存"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="qty" label="ERP库存"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="type" label="库存对比">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === -1" effect="dark" type="warning">短缺</el-tag>
            <el-tag v-if="scope.row.type === 0" type effect="dark">持平</el-tag>
            <el-tag v-if="scope.row.type === 1" effect="dark" type="success">超出</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="cyQty" label="库存差异"></el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        class="pagination-bottom"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 30, 50]"
        :current-page.sync="searchData.pageNum"
        :page-size="searchData.pageSize"
        layout="sizes,total, prev, pager, next, jumper"
        :total="searchData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "inventoryContrast",
  data() {
    // 校验规则
    return {
      areas:[],
      list:[],
      isMoreSearch: false,
      loading: {
        masterTable: true
      },
      // 用作查询的数据11111
      searchData: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        pageNum: 1,
        pageSize: 10,
        total: null,
        itemCode:"",
        areaId: 24897,
        type: ""
      },
      searchStates: [
        {
          value: "enable",
          label: "启用"
        },
        {
          value: "disable",
          label: "禁用"
        }
      ],
      //存放装箱单数据的数组
      inventoryContrasts: [],
      // 存放收货单的数据

      // 控制新增的页面
      dialogNewVisible: false,
      // 控制选择收货单页面
      innerVisibleInventory: false,
      qtyStates: [
        // {
        //   value: 2,
        //   label: "全部"
        // },
        {
          value: -1,
          label: "短缺"
        },
        // {
        //   value: 0,
        //   label: "持平"
        // },
        {
          value: 1,
          label: "超出"
        }
      ],
      // 控制
      isMoreSearch2: false,
      formLabelWidth: "120px",
      rowData: {
        //
      },
      Mystyle: { height: "50px" },
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name"
      },
      type: '',
      roleRowInfo: {
        //
      },
      roleForm: {
        //
      },
      roleRules: {
        //
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.accountStatus === "disable") {
          return "disable-row";
        } else if (row.accountStatus === "enable") {
          return "enable-row";
        }
        return "";
      },
      dataList: [],
      // 选中的数据
      multipleSelection: []
    };
  },
  computed: {},
  watch: {
    //
  },
  methods: {
    //导出
    exportInventory() {
      // console.log(666)
      // let url = localStorage.getItem("baseUrl");
      // //let token = this.$tool.localGet("token");
      // window.location.href=url+"/wmsErp/exportList?itemNo="+this.searchDataNew.itemNo+
      //         "&stockNo="+this.searchDataNew.stockNo+"&qtyState="+this.qtyState;
    },
    //前端分页
    group(array,subGroupLength,type){
      if (type != null) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
          newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
      } else {
        let newArray2 = [];
        newArray2=  array.filter(item=>item.type=type)
        let index = 0;
        let newArray = [];
        while (index < newArray2.length) {
          newArray.push(newArray2.slice(index, index += subGroupLength));
        }
        return newArray;
      }

    },
    //分页设置每页的条数
    handleSizeChange(val) {
      this.searchDataNew.pageNum = 1;
      this.searchData.pageSize = val;
      this.getinventoryContrastData();
    },
    //分页设置从第几条开始
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.inventoryContrasts = this.list[val-1];
    //  this.getinventoryContrastData();
    },
    // 清空查询条件批次号
    clearSearchData() {
      this.searchData.batchName = "";
      this.searchData.batchCode = "";
      this.searchData.areaId = 24897;
      this.searchData.type = null;
    },
    //根据筛选条件查询数据
    getinventoryContrastData() {
      let that = this;
      that.loading.masterTable = true;
      let searchData = JSON.parse(JSON.stringify(this.searchData));
      IOT.getServerData(
        "/wcs/infos/getErpInv",
        "get",
        searchData,
        ret => {
          that.loading.masterTable = false;
          if (ret.code === 200) {
            // rows就是返回的数据
            let list = ret.rows;
            if (list.length > 0) {
              list.forEach(item => {
                item.cyQty = item.quantity - item.qty;
                if (item.cyQty > 0) {
                  item.type = 1;
                } else if (item.cyQty < 0) {
                  item.type = -1;
                } else {
                  item.type = 0;
                }
              });
            }
            this.searchData.total = list.length;
            this.list = this.group(list,this.searchData.pageSize,this.type)
            this.inventoryContrasts = this.list[0];
            //数据缓存
           this.dataList = list;
           // this.searchData.pageNum = ret.pageNumber;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    //选择
    onChange(val){
      this.searchData.areaId = val;
    },
    //选择状态
    onChangeQtyState(type) {
      this.type = type;
      if (type === 2) {
        this.inventoryContrasts = this.dataList;
      } else {
        // 更改下方列表
        this.inventoryContrasts = this.dataList.filter(item => {
          if (item.type === type) {
            return true;
          }
        });
      }
    },
    getAreaData() {
      IOT.getServerData(
        "/area/infos/list",
        "get",
        {
          wareId: PF.getLocal("wareId", "number"),
          pageSize: "999"
        },
        ret => {
          if (ret.code === 200) {
            let list = ret.rows;
            console.log(PF.JSON(list));
            this.areas = list;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    }
  },
  // 页面加载时刷新
  created() {
    this.searchData.pageNum = 1;
    this.searchData.pageSize = 10;
    //请求数据
    this.getinventoryContrastData();
    this.getAreaData();
  }
};
</script>

<style scoped lang="less">
.inventoryContrast {
}
</style>
